<template>
	<div class="listWrap" v-if="isDataLoad">
        <div class="areaPosi titArea" v-if="pageConfig.area.showTitQuery">
            <div class="commonTagArea" v-if="isEditModel">
                <el-tag class="commonTag" type="info">筛选区域</el-tag>
                <el-tag class="commonTag" @click="tagBtnClick('list_edit_titQuery','add')">新增</el-tag>
                <el-tag class="commonTag" @click="tagBtnClick('list_edit_titQuery','delete')">删除</el-tag>
            </div>
            <div class="areaPosi titQuery">
                <listEditTitQueryPreview :pageConfig="pageConfig"></listEditTitQueryPreview>
            </div>
            <div 
                class="areaPosi titBtn" 
                v-if="pageConfig.searchForm.length > 0">
                <el-button type="primary">查询</el-button>
                <el-button @click="resetSearch" class="resetBtn">重置</el-button>
            </div>
        </div>
        <div v-if="pageConfig.area.tableBtn" class="areaPosi tableBtn">
            <div class="commonTagArea" v-if="isEditModel">
                <el-tag class="commonTag" type="info">按钮区域</el-tag>
                <el-tag class="commonTag" @click="tagBtnClick('list_edit_tableBtn','add')">新增</el-tag>
                <el-tag class="commonTag" @click="tagBtnClick('list_edit_tableBtn','delete')">删除</el-tag>
            </div>
            <template v-for="(item,index) in pageConfig.btnUse" :key="index">
                <el-button>{{item.name}}</el-button>
            </template>
        </div>
        <div v-if="pageConfig.area.tableArea" class="areaPosi tableArea">
            <div class="commonTagArea" v-if="isEditModel">
                <el-tag class="commonTag" type="info">表格区域</el-tag>
                <el-tag class="commonTag" @click="tagBtnClick('list_edit_table','set')">设置表格</el-tag>
                <el-tag class="commonTag" @click="tagBtnClick('list_edit_table','add')">添加列</el-tag>
                <el-tag class="commonTag" @click="tagBtnClick('list_edit_table','delete')">删除列</el-tag>
                <el-tag 
                    v-if="pageConfig.tableConfig.operation"
                    class="commonTag" 
                    @click="tagBtnClick('list_edit_table','deleteOperatinBtn')">
                    删除操作列按钮
                </el-tag>
            </div>
            <el-table
                v-loading="loading"
                stripe
                border
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center' }"
                header-cell-class-name="dark-table-header"
                @selection-change="handleSelectionChange"
                ref="tableComp"
            >
                <!--选择框-->
                <el-table-column v-if="pageConfig.tableConfig.selection" type="selection" width="55"/>
                <el-table-column v-if="pageConfig.tableConfig.orderNumber" label="序号" width="55">
                    <template #default="scope">
                        {{ ++scope.$index }}
                    </template>
                </el-table-column>
                <template v-for="(item,index) in pageConfig.table" :key="index">
                    <el-table-column :prop="item.prop" :label="item.label" align="center"/>
                </template>
                <!--操作-->
                <el-table-column label="操作" v-if="pageConfig.tableConfig.operation">
                    <template #default="scope">
                    <a
                        v-for="(item,index) in pageConfig.tableConfig.operationBtn"
                        href="javascript:void(0);"
                        class="operaBtn">
                        <span>{{item.name}}</span>
                    </a>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageConfig.area.bottomArea" class="areaPosi bottomArea">
            <div class="commonTagArea" v-if="isEditModel">
                <el-tag class="commonTag" type="info">分页区域</el-tag>
            </div>
            <el-pagination
                v-model="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
                :total="total"
                background
                layout="->, total, sizes, prev, pager, next, jumper"
                style="margin-top: 0px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
	</div>
</template>
<script type="text/javascript">
	import useRoute  from '@/store/route.js'
    import { mapState,mapActions } from 'pinia';
    import useProject  from '@/store/project.js'
    import listEditTitQueryPreview from '@/components/pageFunction/list_edit_titQuery_preview.vue';
	export default{
		data () {
			return {
				pageConfig:{},
                isDataLoad:false,
                loading:false,
                tableData:[{},{},{},{},{}],
                currentPage:"",
                total:100,
			}
		},
        computed: {
            ...mapState(useRoute, ['nowItem']),
            ...mapState(useProject, ['isEditModel']),
        },
        beforeCreate(){
            this.$mitt.off("setAreaChange",this.setAreaChangeMet);
            this.$mitt.off('cancelSetArea',this.cancelSetAreaMet);
        },
		created (){
            this.$mitt.on("setAreaChange",this.setAreaChangeMet);
            this.$mitt.on('cancelSetArea',this.cancelSetAreaMet);
            this.$util.native.readJson(this.nowItem).then(res => {
                //读取当前选择页面的json配置文件
                if(res.type == 'list'){
                    this.pageConfig = res;
                    this.isDataLoad = true;
                }else{
                    //读取模版json数据
                    reject();
                }
            }).catch(error => {
                this.$util.native.readTemplateJson({name:'list'}).then(res => {
                    //读取当前选择页面的json配置文件
                    this.pageConfig = res;
                    this.isDataLoad = true;
                })
            });
        },
		components : {
			listEditTitQueryPreview
		},
		methods : {
			setAreaChangeMet(areaList){
                this.pageConfig.area = areaList;
            },
            cancelSetAreaMet(){
                //读取当前选择页面的配置文件
                this.$util.native.readJson(this.nowItem).then(res => {
                    this.pageConfig = res;
                    this.isDataLoad = true;
                });
            },
            tagBtnClick(template,type){
                this.$mitt.emit("showEditComponent",{component:template,type:type});
            },
            resetSearch(){
                Object.keys(this.pageConfig.searchFormModel).forEach((key)=>{
                    this.pageConfig.searchFormModel[key] = '';
                })
            },
            //多选框
            handleSelectionChange(){
                
            },
            //分页相关
            handleSizeChange(){

            },
            handleCurrentChange(){

            }
		}
	}
</script>
<style type="text/css" lang="less">
	.listWrap{
        .titArea{
            padding-bottom: 16px;
            border-bottom:1px solid #E5E6EC;
        }
        .titQuery{
            width: 100%;
            display: inline-block;
            vertical-align: middle;
            .el-form-item{
                width: 28%;
                margin-top: 16px;
                margin-bottom: 0px;
                .el-form-item__label{
                    width:32%;
                }
            }
            .el-form-item-dateTimePick .el-form-item{
                width:42%;
                .el-form-item__label{
                    width:22%;
                }
            }
            .el-form-item-rowTwo .el-form-item{
                width:47%;
                .el-form-item__label{
                    width:32%;
                }
            }
            .el-form:not(.el-form-item-dateTimePick):not(.el-form-item-rowTwo) .el-form-item:nth-child(-n+3){
                margin-top: 0px;
            }
            .el-form-item-dateTimePick .el-form-item:nth-child(-n+2){
                margin-top: 0px;
            }
            .el-form-item-rowTwo .el-form-item:nth-child(-n+2){
                margin-top: 0px;
            }
        }
        .titBtn{
            margin-top:15px;
        }
        .tableBtn{
            padding: 16px 0;
        }
        .bottomArea{
            padding-top: 16px;
            .bottomBtn{
                float: left;
            }
        }
        .areaPosi{
            position: relative;
            left: 0;
            top:0;
        }
        .commonTagArea{
            margin-bottom: 10px;
        }
        .commonTag{
            height: 26px;
            line-height: 26px;
            margin-right: 10px;
            cursor: pointer;
        }
        .operaBtn{
            color: #175EFF;
            display: inline-block;
            padding: 2px 12px;
            font-size: 14px;
        }
        .operaBtn:hover{
            background-color: #eee;
        }
        .el-table td.el-table__cell{
            text-align: center;
        }
    }
</style>